<template>
	<view class="bg_color">
		<!-- 公司介绍开始 -->
		<view class="flex-col s_introduce">
			<view class="flex-col group_29">
				<view class="flex-col group_30">
					<u-swiper mode="round" name="image" :height="500" :autoplay=false :list="introduce.image"
						duration="500"></u-swiper>
					<text class="text_6 text_39">{{introduce.describe}}</text>
				</view>
				<view @click="pageTo('/pages/introduce/introduce')" class="button flex-row">
					<text class="text_14">查看更多</text>
					<image src="/static/bg/more.png" class="image_7" />
				</view>
			</view>
		</view>
		<!-- 公司介绍结束 -->
		
		<view class="flex-col group_17" >
			<view class="flex-col">
				<view class="flex-row group_19">
					<view class="left-section view_6"> </view>
					<view class="right-group flex-col items-center">
						<image src="/static/bg/aboutus.png" class="image_17" />
						<text class="text_16">团队成员</text>
					</view>
				</view>
				<text class="text_6 text_30">About us</text>
			</view>
			<view @click="toDetail(item)" class="bottom-group flex-col view_8" :key="i" v-for="(item, i) in list">
				<image :src="item.image" class="image_18" />
				<view class="flex-col group_20">
					<!-- <view class="section_5"> </view> -->
					<view class="flex-col section_6">
						<view class="flex-col">
							<view class="justify-between group_22">
								<view class="flex-col">
									<text class="text_31">{{item.name}}</text>
									<text class="text_6 text_32">{{item.position}}</text>
								</view>

							</view>
							<view class="flex-row">
								<view class="section_9"> </view>
								<view class="divider_2"> </view>
							</view>
						</view>
						<view class="flex-col group_25">
							<text class="describe">{{item.describe}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="list != ''" icon-color="#D19A60" color="#D19A60" @loadmore="loadmore" margin-bottom="20"
			margin-top="20" :load-text="loadText" :status="status" />
		
		<u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			return {
				tabbar: [],
				list: [],
				introduce: [], //公司介绍
				status: 'loadmore',
				pageSize: 10,
				pageIndex: 1,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载，请喝杯茶...',
					nomore: '到底了'
				}
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') { return }
			this.status = 'loading'
			this.page = ++this.pageIndex
			this.loadmore()
		},
		onLoad() {
			that = this
			vk = that.vk
			let base_info = uni.getStorageSync('base_info')
			// that.tabbar = base_info.tabbar
			that.tabbar = getApp().globalData.base_info.tabbar
			that.introduce = getApp().globalData.base_info.introduce
			
			this.loadmore()
		},
		methods: {
			toDetail(item) {
				vk.navigateTo('/pages/aboutus-detail/aboutus-detail?_id=' + item._id)
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			loadmore() {
				that.$api.aboutus({
						pageIndex: that.pageIndex,
						pageSize: that.pageSize
					}).then((data) => {
					if (data.code == 0) {
						if (!data.hasMore) { that.status = 'nomore' }
						that.list = that.list.concat(data.rows)
						console.log(that.list)
					} else {
						vk.toast('网络开小差了~')
					}
				}).catch((err) => {
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//公司介绍-开始
	.s_introduce {
		margin-top: 0rpx;
	
		.group_29 {
			padding-left: 30rpx;
			padding-right: 24rpx;
	
			.group_30 {
				padding: 30rpx 0 35rpx;
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 40rpx;
	
				.text_39 {
					margin-top: 28rpx;
					text-align: left;
				}
			}
	
			.button {
				align-self: center;
				color: $style-color;
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx $style-color;
	
				.text_14 {
					margin-left: 75rpx;
				}
	
				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}
		}
	}
	
	.group_17 {
		padding-top: 25rpx;

		.bottom-group {
			padding: 0 30rpx;

			.image_18 {
				align-self: center;
				border-radius: 6rpx 6rpx 0px 0px;
				width: 92vw;
				height: 76vw;
			}

			.group_20 {
				position: relative;

				.section_5 {
					margin: 0 15rpx;
					background-color: rgba(0, 0, 0, 0.11);
					filter: blur(6rpx);
					border-radius: 25rpx;
					height: 61rpx;
				}

				.section_6 {
					padding-left: 40rpx;
					padding-right: 35rpx;
					background-color: rgb(209, 154, 96);
					border-radius: 0px 0px 6rpx 6rpx;

					.group_25 {
						padding: 31rpx 0 32rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						line-height: 50rpx;
						width: 100%;
						// white-space: nowrap;
					}

					.group_22 {
						padding: 30rpx 0 14rpx;

						.group_24 {
							margin-right: 5rpx;
							margin-top: 27rpx;

							.section_7 {
								border-radius: 50%;
								width: 14rpx;
								height: 14rpx;
								border: solid 3rpx rgb(255, 255, 255);
							}

							.section_8 {
								margin-left: 20rpx;
								background-color: rgba(255, 255, 255, 0.6);
								border-radius: 50%;
								width: 14rpx;
								height: 14rpx;
							}
						}

						.text_31 {
							color: rgb(255, 255, 255);
							font-size: 48rpx;
							font-weight: 500;
							line-height: 67rpx;
							white-space: nowrap;
						}

						.text_32 {
							margin-top: 9rpx;
							color: rgb(255, 255, 255);
							font-size: 24rpx;
							line-height: 33rpx;
							white-space: nowrap;
						}
					}

					.section_9 {
						background-color: rgb(255, 255, 255);
						width: 48rpx;
						height: 6rpx;
					}

					.divider_2 {
						margin-right: 5rpx;
						margin-top: 3rpx;
						flex: 1 1 auto;
						background-color: rgb(255, 255, 255);
						height: 2rpx;
					}
				}
			}

			.button {
				align-self: center;
				color: rgb(209, 154, 96);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx rgb(209, 154, 96);

				.text_14 {
					margin-left: 75rpx;
				}

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}

			.section_10 {
				margin-top: 25rpx;
			}
		}

		.view_8 {
			margin-top: 30rpx;
		}

		.group_19 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: rgb(209, 154, 96);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_6 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_17 {
					width: 69rpx;
					height: 60rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_30 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}

		.text_6 {
			text-transform: uppercase;
		}

		.describe {
			width: 100rpx;
			word-break: break-all;
			word-wrap: break-word;
			width: 100%;
		}
	}
</style>
